<!-- -->
<template>
  <div class="box">
    <el-card>
      <el-card>
        <SearchTable @search="getSearchData" :page="searchPage" />
      </el-card>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="img" label="图片">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="floorName" label="楼盘名称"></el-table-column>
        <el-table-column prop="floorAddress" label="楼盘地址"></el-table-column>

        <el-table-column prop="name" label="发起人"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="date" label="起始时间"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import SearchTable from "../../components/SearchTable";
import { getGroupList, searchGroupList } from "@/api";
export default {
  // import引入到组件需要注入到对象中才能使用
  components: {
    SearchTable
  },
  data() {
    // 这里存放数据
    return {
      searchPage: [
        {
          lable: "地区",
          type: "city",
          value: {
            province: "province",
            city: "city",
            area: "area"
          }
        },
        {
          lable: "搜索",
          type: "input",
          value: "value",
          placeholder: "团购名称"
        },
        {
          lable: "状态",
          type: "select",
          value: "status",
          options: [
            {
              value: "已开团",
              label: "已开团"
            },
            {
              value: "未开团",
              label: "未开团"
            }
          ]
        }
      ],
      tableData: [],
      value: "",
      values: ""
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getSearchData(data) {
      this.value = data.value;
      this.values = data.status;
      searchGroupList({ value: this.value, values: this.values }).then(res => {
        this.tableData = res.data;
      });
    },
    getList() {
      getGroupList().then(res => {
        this.tableData = res.data;
      });
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang='scss'  scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  ::v-deep .el-card {
    width: 100%;
    overflow-y: auto;
  }
}
</style>
